<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>查询员工信息</title>
<!-- Bootstrap core CSS -->
<link href="${basePath}bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<!-- Optional Bootstrap Theme -->
<link href="data:text/css;charset=utf-8,"
	data-href="${basePath}bootstrap-3.3.7-dist/css/bootstrap-theme.min.css"
	rel="stylesheet" id="bs-theme-stylesheet">
<!-- bootstrap-datetimepicker -->
<script src="${basePath}jquery-1.11.3/jquery.min.js"></script>

<link
	href="${basePath}pagination-2.0.7/css/pagination.css"
	rel="stylesheet" />
<script
	src="${basePath}pagination-2.0.7/js/pagination.min.js"></script>
	
<link
	href="${basePath}bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"
	rel="stylesheet" />
<script
	src="${basePath}bootstrap-datetimepicker/js/moment-with-locales.min.js"></script>
<script
	src="${basePath}bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
	<link
	href="${basePath}bootstrap-3.3.7-dist/css/bootstrapEx.css"
	rel="stylesheet" />
<script
	src="${basePath}bootstrap-3.3.7-dist/js/bootstrapEx.js"></script>

<!-- Bootstrap core JavaScript
		<!-- Placed at the end of the document so the pages load faster -->
<script src="${basePath}bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
//页面加载完成时就执行查询操作
$(function(){  
	doJqueryAjax();
	});
//加载完成时执行该方法
	$(function() {		
		 $('#datetimepicker1,#datetimepicker2').datetimepicker({  
		        format: 'YYYY-MM-DD HH:mm:ss',  
		        locale: moment.locale('zh-cn')  
		    }); 
	});
</script>
<script type="text/javascript">
//bootStrap模态框的初始化
//dom初始化完成时 加载模态框
function showModal(iframeUrl) {
	//创建一个模态框
    var Modal3 = InitModal3(iframeUrl);
	//显示模态框
    Modal3.show();
    //Modal关闭完成时的时间处理（只需要定义该函数就可以被调用）
    modal3_Hideend = function () {
    	
		//调用ajax进行数据修改之后的更新
    	doJqueryAjax();
	}     
    }
//模态框的初始化
function InitModal3(iframeUrl) {
    //模态框加载的父标签以及模态框生成的div
	$(document.body).append('<div id="modal3"></div>');
    //创建一个模态框对象
    Modal3 = new Modal();
    //模态框标题设置为空
    Modal3.title = "";
    //模态框将在的位置
    Modal3.renderto = "#modal3";
    //是否绘制完成后显示模态框
    Modal3.InitShow = true;
    //模态框的按钮数组
    Modal3.btns = [{ 
    	id: "closebtn" ,
    	text:"修改",
    	}];
    //创建tab对象
    tab1 = new Tab();
    Modal3.OnfirstInited = function (thismodal) {
        tab1.tabs = [{
        	//加载tab控件的id
            id: "tabs1", 
            title: "用户信息修改",
            active: true, 
            isiframe: true, 
            url: iframeUrl
        }];
        tab1.renderto = thismodal.body;
        tab1.Init();
        $("#closebtn").click(function () {
           $('#tabs1 > iframe').contents().find("#formMod").submit();
        })
    }
    //返回模态框对象
    return Modal3;
}
function doDeleteAjax(delIndex) {
	//将删除的记录的id值赋值给隐藏控件，通过form表单发送到后台
	$("#delIndex").val(delIndex);
	$.ajax({
		   type: "POST",//请求类型
		   url: "${basePath}EmployeeInfoDeleteServlet",//服务器url
		   dataType: "json",//服务器返回的数据类型
		   data:$("#myForm").serialize(),//序列化处理
		   success: function(data){//成功之后的回调函数
			 //调用分页插件的分页的行为方法
			 if  (data != null && data.length>0){
			 doPaging(data);
		   }else{
			   $("#tbShow").html("");
		   }
		   }
		});
}


function doJqueryAjax() {
	$.ajax({
		   type: "POST",//请求类型
		   url: "${basePath}EmployeeInfoSearchServlet",//服务器url
		   dataType: "json",//服务器返回的数据类型
		   data:$("#myForm").serialize(),//序列化处理
		   success: function(data){//成功之后的回调函数
			 //调用分页插件的分页的行为方法
			 if  (data != null && data.length>0){
			 doPaging(data);
		   }else{
			   $("#tbShow").html("");
		   }
	}
		});
}


// 调用分页控件
	function doPaging(pageDatas) {
		// 调用分页插件的分页处理的方法
		$('#page').pagination({
			dataSource : pageDatas, // 分页的数据源			
			pageSize : 5, // 每页有几条记录
			showGoInput : true, // 是否显示输入页面处理
			showGoButton : true,
			callback : function(data, pagination) { // 点击分页插件页数时的回调方法
				// 调用分页数据的解析处理方法
				parseJsonData(data);
			}
		})
	
}

	// json解析处理函数
	function parseJsonData(data){
		//解析的结果串
		var strResult = "";
		// 使用jquery解析json对象，因为json是一个list数据结构，是一个数组结构，所以使用each函数进行解析
		// 如果json返回的是一个对象，则可以先将该对象转换为数组结构再进行遍历，转换方式： "["+data+"]"
		$.each( data, function(index, eachVal){ // 每个eachVal就是list中的一个bean对象
			strResult +="<tr>";	
			
			strResult +="<th scope='row'>";	
			strResult +=index+1;	
			strResult +="</th>";
			
			strResult +="<td>";	
			strResult +=eachVal.emp_name;	
			strResult +="</td>";	
			
			strResult +="<td>";	
			strResult +=eachVal.emp_sex;	
			strResult +="</td>";
			
			strResult +="<td>";	
			strResult +=eachVal.emp_date;	
			strResult +="</td>";
			
			strResult +="<td>";	
			strResult +=eachVal.emp_age;	
			strResult +="</td>";
			
			strResult +="<td>";	
			strResult +=eachVal.emp_tel;	
			strResult +="</td>";
			
			strResult +="<td>";	
			strResult +=eachVal.emp_ad;	
			strResult +="</td>";
			
			strResult +="<td><img style='width: 30px; heigth: 30px;' src='";	
			strResult +=eachVal.emp_img;	
			strResult +="'></td>";
			
			strResult +="<td>";	
			strResult +="<a href='javascript:void(0)' onclick='showModal(\"EmployeeInfoModalModifyDispatchServlet?jp=WEB-INF/logined/employeeInfoManager/employeeInfoModalModify&sid="+eachVal.emp_id+"\");'><span class='glyphicon glyphicon-pencil' aria-hidden='true'></span></a>";	
			strResult +="</td>";
			
			strResult +="<td>";	
			strResult +="<a href='javascript:doDeleteAjax("+eachVal.emp_id+");' onclick='return confirm(\"是否要删除["+eachVal.emp_name+"]该记录\");'><span class='glyphicon glyphicon-trash' aria-hidden='true'></span></a>";	
			strResult +="</td>";
					
			strResult +="</tr>";
			});
		$("#tbShow").html(strResult);
}
</script>
</head>

<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12">
				<div class="row">
					<div class="col-md-2"></div>
					<div class="col-md-8">
						<form class="form-horizontal" id="myForm">
							<div class="form-group">
							<!-- 隐藏控件：删除记录的id -->
							<input type="hidden" id="delIndex" name="delIndex">
							</div>
							<div class="form-group">
								<label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
								<div class="col-sm-4">
									<input type="text" class="form-control" id="emp_name"
										name="emp_name" placeholder="请输入学生姓名">
								</div>

								<label for="inputEmail3" class="col-sm-2 control-label">性别</label>
								<div class="col-sm-4">
									<label class="radio-inline"> <input type="radio"
										id="emp_sex" name="emp_sex" value="女"> 女
									</label> <label class="radio-inline"> <input type="radio"
										id="emp_sex" name="emp_sex" value="男"> 男
									</label>
									<label class="radio-inline"> <input type="radio"
										id="emp_sex3" name="emp_sex" value="" checked="checked"> 性别不限
									</label>
								</div>
							</div>
							 <div class="form-group">
								<label for="inputPassword3" class="col-sm-2 control-label">出生日期开始</label>
								<div class="col-sm-4">
									<!-- <input type="text" class="form-control" id="stuBirthday"
										name="stuBirthday" placeholder="请选择出生日期"> -->
									<div class='input-group date' id='datetimepicker1'>
										<input type='text' class="form-control" id="emp_date"
											name="emp_date" /> <span class="input-group-addon">
											<span class="glyphicon glyphicon-calendar"></span>
										</span>
									</div>
									
									<div class='input-group date' id='datetimepicker2'>
										<input type='text' class="form-control" id="emp_date2"
											name="emp_date2" /> <span class="input-group-addon">
											<span class="glyphicon glyphicon-calendar"></span>
										</span>
									</div>
								</div>
								</div>
								<div class="form-group">
								<label for="inputPassword3" class="col-sm-2 control-label">年龄</label>
								<div class="col-sm-4">
									<input type="text" class="form-control" id="emp_age"
										name="emp_age" placeholder="请输入年龄">
								</div>
							</div>							
                           <div class="form-group">
								<label for="inputPassword3" class="col-sm-2 control-label">地址</label>
								<div class="col-sm-4">
									<input type="text" class="form-control" id="emp_ad"
										name="emp_ad" placeholder="请输入地址">
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-offset-4 col-sm-4">
									<button type="button" class="btn btn-default" onclick="doJqueryAjax()">查询</button>
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<button type="reset" class="btn btn-default">重置</button>
								</div>
							</div>
						</form>
					</div>
					<div class="col-md-2"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="bs-example" data-example-id="simple-table">
    <table class="table">
      
      <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>出生日期</th>
          <th>年龄</th>
          <th>电话</th>
          <th>地址</th>
          <th>头像</th>
          <th>修改</th>
          <th>删除</th>
        </tr>
      </thead>
      <tbody id="tbShow">
    
      </tbody>
      
    </table>
  </div>
  <div id="page">
    <div class="m-pagination"></div>
    </div>
</body>

</html>